<template>
  <div>
    <div class="list">
      <scroll-view
        class="scroll-wrap no-scroll-bar"
        style="height:calc(100% - 10px)"
        scroll-y
        @scrolltolower="handleLoadMore"
      >
        <div class="orderBox">
          <div
            class="orderList"
            v-for="(item,index) in list"
            :key="index"
            @click="orderInfoClick(item)"
          >
            <div class="listTop">
              <div class="listTopLeft">
                <img
                  class="image"
                  :src="item.groupOrderGoods.goodsImg ? item.groupOrderGoods.goodsImg : ''"
                  alt="图标"
                  mode="scaleToFill"
                >
                <div class="info">
                  <p>{{item.groupOrderGoods.goodsName}}</p>
                  <span>{{item.groupOrderGoods.goodsName}}</span>
                  <div class="infoImg">
                    <img
                      src="https://akk.028wkf.cn/kdb-weapp-img/img/ptrs.png"
                      alt
                      mode="scaleToFill"
                    >
                    <span>{{item.groupOrderCustomerList.length}}&nbsp;人拼</span>
                  </div>
                </div>
              </div>
              <div class="listTopRight">
                <p
                  :class="item.state === '0' ? 'ing' : item.state === '1' ? 'succeed' : 'erreor'"
                >{{item.state === '0' ? '拼团中' : item.state === '1' ? '拼团成功' : '拼团失败'}}</p>
                <span>￥&nbsp;无此参数/人</span>
              </div>
            </div>
            <div class="listBottom">
              <div class="userList">
                <div v-for="(e,i) in item.groupOrderCustomerList" :key="i">
                  <img :src="e.avatar" alt mode="scaleToFill">
                  <span>{{e.nickname}}</span>
                </div>
              </div>
              <div class="bottomTiem">
                <p>开始时间：{{item.expireDate}}</p>
                <!-- <p>结束时间：{{item.finishDate}}</p> -->
                <p>结束时间：{{item.expireDate}}</p>
              </div>
            </div>
          </div>
        </div>

        <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
      </scroll-view>
    </div>
    <button class="btn" @click="goVirtualGroup">虚拟拼团</button>
  </div>
</template>

<script>
import { FIND_GROUP_ORDER_PAGE_API } from '@/api'

export default {
  components: {},
  data () {
    return {
      list: [],
      currentPage: 1,
      alreadyLastPage: false
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onShow () {
    this.init()
    this._findGroupOrderPage()
  },
  created () {},
  methods: {
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this._findGroupOrderPage()
      }
    },
    goVirtualGroup () {
      this.$router.push('/pages/home/group/virtual-group/main')
    },
    init () {
      this.list = []
      this.currentPage = 1
    },
    orderInfoClick (item) {
      let groupOrderNo = item.groupOrderNo
      this.$router.push(
        '/pages/home/group/order-list-info/main?groupOrderNo=' + groupOrderNo
      )
    },
    _findGroupOrderPage () {
      const vm = this
      let params = {
        shopId: vm.account.shopId
      }
      FIND_GROUP_ORDER_PAGE_API(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    printList (list, isFirst, isLast) {
      const vm = this
      if (isFirst) {
        vm.list = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.list.push(...list)
        vm.alreadyLastPage = true
      } else {
        vm.list.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    }
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

body {
  background: #edeef3;
}
.list {
  height: calc(100% - 50px);
  > .scroll-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // box-shadow: 0 0 8px lighten(#5c94fc, 20%);
    height: 80px;
    position: relative;
    overflow: hidden;
    transform: translateY(10px);
    .orderBox {
      width: 100%;
      height: 120px;
      > .orderList {
        margin-bottom: 10px;
        padding: 10px;
        background: #fff;
        > .listTop {
          width: 100%;
          height: 60px;
          display: flex;
          justify-content: space-between;
          > .listTopLeft {
            width: 220px;
            display: flex;
            > .image {
              width: 60px;
              height: 60px;
              border-radius: 6px;
            }
            > .info {
              margin-left: 10px;
              width: 70px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              p {
                font-size: 14px;
                color: #000;
                line-height: 14px;
                font-weight: 500;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              span {
                font-size: 12px;
                line-height: 12px;
                color: #686868;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              > .infoImg {
                display: flex;
                align-items: center;
                img {
                  width: 20px;
                  height: 20px;
                }
                span {
                  width: auto;
                  padding: 0 5px;
                  font-size: 12px;
                  text-align: center;
                  line-height: 18px;
                  color: #ff942c;
                  border: 1px solid #ff942c;
                  border-left: 0;
                  border-top-right-radius: 3px;
                  border-bottom-right-radius: 3px;
                }
              }
            }
          }
          > .listTopRight {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-end;
            p {
              font-size: 14px;
              line-height: 14px;
            }
            .ing {
              color: #1e8027;
            }
            .succeed {
              color: #5d93fd;
            }
            .erreor {
              color: #b43e45;
            }
            span {
              font-size: 18px;
              color: #000;
            }
          }
        }
        > .listBottom {
          margin-top: 2.5px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 50px;
          > .userList {
            width: 40%;
            display: flex;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            div {
              width: 40px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              img {
                width: 20px;
                height: 20px;
                border-radius: 50px;
              }
              span {
                font-size: 10px;
                color: #6f6f6f;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 16px;
              }
            }
          }
          > .bottomTiem {
            font-size: 12px;
            height: 50px;
            color: #9e9e9e;
            display: flex;
            flex-direction: column;
            justify-content: center;
            p {
              line-height: 22px;
            }
          }
        }
      }
    }
  }

  .end-tip {
    margin: 0;
    padding: 15px;
    text-align: center;
    color: $gray;
    font-size: 15px;
  }
}
.btn {
  width: 100%;
  height: 45px;
  background: #5d93fd;
  font-size: 16px;
  color: #fff;
  line-height: 45px;
  position: fixed;
  bottom: 0;
  border-radius: 0;
}
</style>

